<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link rel="stylesheet/less" media="screen" href="@{'/public/stylesheets/less/bootstrap.less'}">
    <link rel="stylesheet/less" media="screen" href="@{'/public/stylesheets/less/vv.less'}">
    <script src="@{'/public/javascripts/less-1.1.5.min.js'}" type="text/javascript" charset="UTF-8"></script>
    <script src="@{'/public/javascripts/jquery-1.7.min.js'}" type="text/javascript" charset="UTF-8"></script>
    <script src="@{'/public/javascripts/bootstrap-buttons.js'}" type="text/javascript" charset="UTF-8"></script>
    <style type="text/css">
      body {
        padding-top: 60px;
      }
    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="topbar">
      <div class="topbar-inner">
        <div class="container-fluid">
          <a class="brand" href="#">Voto Vivo!</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container-fluid">
    
	<div class="sidebar">
		<div class="row">
			<div class="span2">
			<ul class="media-grid">
				<li>
					<a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a>
				</li>	
			</ul>
			</div>
			<div class="span2">
				<p>${eleitor.nome}<br/>${eleitor.uf}<br/>${eleitor.cidade}</p>
			</div>		
		</div>
		
		<hr>
		
		<div class="row">
			<div class="span4"><a href="#" class="">Editar Perfil</a></div>
			<div class="span4"><a href="#" class="">Escolher Politicos</a></div>
		</div>
		
		<hr>
		
		<div class="row">
			<div class="span4">
				<ul class="media-grid">
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
					<li><a href="#"><img class="thumbnail-medium" src="${eleitor.foto}" alt=""></a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="sidebar-right">
		<div class="row">
			<div class="span4">
			<h3>Senadores</h3>
				<ul class="media-grid">
				#{list items:eleitor.politicos, as:'politico'}
					#{if politico.casa.nome == 'Senado'}
					<li><a href="@{Application.paginaPolitico(politico.id, eleitor.id)}"><img class="thumbnail-medium" src="${politico.foto}" alt=""></a></li>
					#{/if}
				#{/list}
				</ul>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="span4">
			<h3>Depudatos Federais</h3>
				<ul class="media-grid">
				#{list items:eleitor.politicos, as:'politico'}
					#{if politico.casa.nome == 'Camara'}
					<li><a href="#"><img class="thumbnail-medium" src="${politico.foto}" alt=""></a></li>
					#{/if}
				#{/list}
				</ul>
			</div>
		</div>
	</div>

	<div class="content">
	  
		#{list items:materias, as:'materia'}
		<div class="row">
			<div class="span10">
				<div class="row">
					<div class="span3">
						<h3>${materia.titulo}</h3>
					</div>
					<div class="span7">
						<div id="div_${materia.id}" class="input pull-right">
							#{set posicaoEleitor: materia.getPosicao(eleitor) /}
							#{if posicaoEleitor != null}
								#{if posicaoEleitor.voto.toString() == 'SIM'}
									<span class="label success">Você Votou Sim</span>
								#{/if}
								#{elseif posicaoEleitor.voto.toString() == 'NAO'}
								    <span class="label important">Você Votou Não</span>
								#{/elseif}
							#{/if}
							#{else}
								<button id="btn_sim_${materia.id}" class="btn success">Eu Voto Sim</button>
								<button id="btn_nao_${materia.id}" class="btn danger">Eu Voto Não</button>
							#{/else}
							<script>
				            	function votar(eleitorId, materiaId, voto) {
									var f = #{jsAction @Application.vote(':eleitorId', ':materiaId', ':voto') /};
									var ajaxParam = {url : f({eleitorId: eleitorId, materiaId: materiaId, voto: voto}), success: ok, dataType: 'json', type: 'GET'};
									$.ajax(ajaxParam);
								}
				            	
				            	function ok() {
				            		alert(1);
				            	}
			            	
					            $(function() {
					            	var divMateria = $('#div_${materia.id}')
					            	
					              var sim = $('#btn_sim_${materia.id}')
					              var nao = $('#btn_nao_${materia.id}')
					              sim.click(function () {
					            	  votar('${eleitor.id}', '${materia.id}', 'SIM')
					            	  divMateria.html('<span class="label success">Você Votou Sim</span>');
					              })
					              
					              nao.click(function () {
					            	  votar('${eleitor.id}', '${materia.id}', 'NAO')
					            	  divMateria.html('<span class="label important">Você Votou Não</span>');
					              })
					            })
					            

							</script>
						
						</div>
					</div>
				</div>	
				<p>${materia.descricao}</p>
				<p><a class="btn" href="#">Mais Detalhes &raquo;</a></p>

				#{list items:eleitor.politicos, as:'politico'}
				#{set posicao: materia.getPosicao(politico) /}
				#{if posicao != null}
				<div class="row">
					<div class="span1">
					<ul class="media-grid">
						<li>
							<a href="@{Application.paginaPolitico(politico.id, eleitor.id)}"><img class="thumbnail-small" src="${politico?.foto}" alt=""></a>
						</li>	
					</ul>
					</div>
					<div class="span4">
						<p>${politico.nome} | ${politico.partido}</p>
						
						#{if posicao.voto.toString() == 'SIM'}
							<span class="label success">Votou Sim</span>
						#{/if}
						#{elseif posicao.voto.toString() == 'NAO'}
						    <span class="label important">Votou Não</span>
						#{/elseif}
						#{elseif posicao.voto.toString() == 'SECRETO'}
						    <span class="label">Votação Secreta</span>
						#{/elseif}
						#{elseif posicao.voto.toString() == 'ABSTEVESE'}
						    <span class="label warning">Absteve-se</span>
						#{/elseif}
					</div>
				</div>
				#{/if}
				#{/list}
			</div>
		</div>
		<hr>
		#{/list}
		
		<div class="row">
			<footer>
			<p>&copy; Voto Vivo 2011</p>
			</footer>
		</div>
		
	</div> <!-- content -->
</div> <!-- container-fluid -->
  </body>
</html>